<template>
    <div class="open_cupboard">
        <top-timer :back="false" :second="240"/>
        <p class="font_M font_40 col_333 title center">箱门已开,请放入洗涤好的衣物</p>
        <p class="font_30 col_777 tips center">放完衣物后，请关闭箱门</p>
        <div class="frame font_28 center">
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g1'?'is_open':''">g1</div>
                <div class="t80_240" :class="openDoorNum === 'g2'?'is_open':''">g2</div>
                <div class="t80_240" :class="openDoorNum === 'g3'?'is_open':''">g3</div>
                <div class="t160_240 font_28">显示屏</div>
                <div class="t80_240" :class="openDoorNum === 'g4'?'is_open':''">g4</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd1'?'is_open':''">d1</div>
                    <div class="t160_80" :class="openDoorNum === 'd2'?'is_open':''">d2</div>
                    <div class="t160_80" :class="openDoorNum === 'd3'?'is_open':''">d3</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g5'?'is_open':''">g5</div>
                <div class="t80_240" :class="openDoorNum === 'g6'?'is_open':''">g6</div>
                <div class="t80_240" :class="openDoorNum === 'g7'?'is_open':''">g7</div>
                <div class="t80_240" :class="openDoorNum === 'g8'?'is_open':''">g8</div>
            </div>
            <div class="row">
                <div class="t80_240" :class="openDoorNum === 'g9'?'is_open':''">g9</div>
                <div class="t80_240" :class="openDoorNum === 'g10'?'is_open':''">g10</div>
                <div class="t80_240" :class="openDoorNum === 'g11'?'is_open':''">g11</div>
                <div class="t160_240">
                    <div class="t160_80 font_28">扫码处</div>
                    <div class="t160_160" :class="openDoorNum === 'b1'?'is_open':''">b1</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g12'?'is_open':''">g12</div>
                <div class="t160_240">
                    <div class="t160_80" :class="openDoorNum === 'd4'?'is_open':''">d4</div>
                    <div class="t160_80" :class="openDoorNum === 'd5'?'is_open':''">d5</div>
                    <div class="t160_80" :class="openDoorNum === 'd6'?'is_open':''">d6</div>
                </div>
                <div class="t80_240" :class="openDoorNum === 'g13'?'is_open':''">g13</div>
                <div class="t80_240" :class="openDoorNum === 'g14'?'is_open':''">g14</div>
                <div class="t80_240" :class="openDoorNum === 'g15'?'is_open':''">g15</div>
                <div class="t80_240" :class="openDoorNum === 'g16'?'is_open':''">g16</div>
            </div>
            <div class="row">
                <div class="t80_80" :class="openDoorNum === 'x1'?'is_open':''">x1</div>
                <div class="t80_80" :class="openDoorNum === 'x2'?'is_open':''">x2</div>
                <div class="t80_80" :class="openDoorNum === 'x3'?'is_open':''">x3</div>
                <div class="t80_80" :class="openDoorNum === 'x4'?'is_open':''">x4</div>
                <div class="t80_80" :class="openDoorNum === 'x5'?'is_open':''">x5</div>
                <div class="t80_80" :class="openDoorNum === 'x6'?'is_open':''">x6</div>
                <div class="t160_80" :class="openDoorNum === 'd7'?'is_open':''">d7</div>
                <div class="t80_80" :class="openDoorNum === 'x7'?'is_open':''">x7</div>
                <div class="t80_80" :class="openDoorNum === 'x8'?'is_open':''">x8</div>
                <div class="t80_80" :class="openDoorNum === 'x9'?'is_open':''">x9</div>
                <div class="t80_80" :class="openDoorNum === 'x10'?'is_open':''">x10</div>
            </div>
        </div>
        <div class="center tou_btn" @click="startDelivery">开始投递</div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'delivery-open-cupboard',
    data () {
      return {
        openDoorNum: 'd1',
      }
    },
    created () {
      let boxCode = this.$route.query.boxCode
      this.openDoorNum = boxCode
    },
    methods: {
      startDelivery () {
        this.$router.push({
          path: 'scanDelivery',
          query: {
            boxCode: this.$route.query.boxCode,
            boxDetailId: this.$route.query.boxDetailId
          }
        })
      }
    }
  }
</script>

<style lang="scss">
    .open_cupboard {
        .title {
            margin: 0.40rem 0 0.20rem;
        }
        .tips {
            margin-bottom: 0.40rem;
        }
        .frame {
            margin: 0 0.60rem;
            overflow: hidden;
            .row {
                overflow: hidden;
                &:first-of-type {
                    > div {
                        border-top: 0.02rem solid #979797;
                    }
                    > div:first-of-type {
                        border-top-left-radius: 0.16rem;
                    }
                    > div:last-of-type {
                        border-top-right-radius: 0.16rem;
                    }
                }
                &:last-of-type {
                    > div:first-of-type {
                        border-bottom-left-radius: 0.16rem;
                    }
                    > div:last-of-type {
                        border-bottom-right-radius: 0.16rem;
                    }
                }
                div {
                    float: left;
                    display: inline-block;
                    border-bottom: 0.02rem solid #979797;
                    border-right: 0.02rem solid #979797;
                }
                > div:first-of-type {
                    border-left: 0.02rem solid #979797;
                }
            }
        }
        .t80_240 {
            width: 0.80rem;
            height: 2.40rem;
        }
        .t160_240 {
            width: 1.60rem;
            height: 2.40rem;
        }
        .t160_80 {
            width: 1.60rem;
            height: 0.80rem;
        }
        .t160_160 {
            width: 1.60rem;
            height: 1.60rem;
        }
        .t80_80 {
            width: 0.80rem;
            height: 0.80rem;
        }
        .is_open {
            background-color: #d9ebfe;
        }
        .tou_btn {
            font-size: 0.4rem;
            color: #fff;
            margin: 0.5rem auto;
            width: 2.40rem;
            height: 0.8rem;
            background: rgba(10, 130, 236, 1);
            box-shadow: 0 0.02rem 0.04rem 0 rgba(10, 130, 236, 0.2);
            border-radius: 0.5rem;
            line-height: 0.8rem;
        }
    }
</style>